<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-10-13 23:02:20
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-10-13 23:13:13
 * @FilePath: /BLOG/src/views/home/comments/DogLog.vue
-->
<template>
  <div class="tiangou-log-wrap">
    <div class="slider-title">
      (❁´◡`❁) 舔狗日记
      <div class="mac-style"></div>
    </div>
    <div class="content-wrap">
      <div class="content text">{{ state.dog }}</div>
    </div>
    <div class="buttom-btn pointer kbn-custom" data-tip="换一个 「舔(❁´◡`❁)」？" @click="getDog()">换一个</div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, watch, onMounted, computed } from 'vue';

const state = reactive({
  dog: '你跟他已经醒了吧？我今天捡垃圾挣了一百多，明天给你打过去。你快点休息吧，我明天叫你起床给你点外卖、买烟、给你点你最喜欢的奶茶。晚上我会继续去摆地摊的，你不用担心我烦你床只有那么大睡不下三个，你要好好照顾好自己，不要让他抢你被子，我永远爱你'
});

// 舔狗日记
const getDog = () => {
  axios.get('https://v2.api-m.com/api/dog').then(res => {
    state.dog = res.data.data;
  });
};
getDog();
</script>

<style lang="scss" scoped>
.tiangou-log-wrap {
  margin-top: 20px;
  background-color: #fff;
  .content-wrap {
    padding: 20px;
    .content {
      color: #222;
      line-height: 32px;
      border: 1px solid #d3d5db;
      padding: 15px;
      background: #f2f6fc;
      border-bottom-left-radius: 15px 225px;
      border-bottom-right-radius: 20px 205px;
      border-top-left-radius: 28px 125px;
      border-top-right-radius: 100px 30px;
    }
  }
  .buttom-btn {
    padding-bottom: 20px;
    text-align: center;
    color: #222;
  }
}
</style>
